<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div (mouseover)="setForceStyle(true)" (mouseout)="setForceStyle(false)"
     [ngClass]="{
       'ddp-active':isShowDownloadPopup,
       'ddp-popup-show':isShowDownloadPopup,
       'ddp-page-mapview' : 'map' === chartType,
       'type-event-trigger' : isShowEvtTriggerEditor
     }"
     class="ddp-box-widget ddp-box-graph" style="display:block;">

  <!-- Top Control -->
  <div class="ddp-top-control ddp-clear"
       *ngIf="isViewMode && ( !errorInfo || !errorInfo.show ) && !isShowEvtTriggerEditor" [style.float]="toolTipLoc ? 'left' : 'right' ">

    <!-- 버튼 목록 -->
    <div class="ddp-ui-buttons" >

      <div *ngIf="chartType === 'grid'"class="ddp-box-btn2">
        <em (click)="toolTipLoc = !toolTipLoc" class="ddp-icon-widget-move"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info" style="left: 10px;width: 30px;">
          <em class="ddp-icon-view-down"></em>
          Move
        </div>
        <!-- //툴팁 -->
      </div>

      <!-- Event Trigger -->
      <div *ngIf="isAuthMgmtViewMode" class="ddp-box-btn2">
        <em (click)="openUserFuncInput()" class="ddp-icon-widget-trigger "></em>
        <div class="ddp-ui-tooltip-info" style="left: 10px;width: 75px;">
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.board.ui.custom-action' | translate }}
        </div>
      </div>
      <!-- // Event Trigger -->

      <div class="ddp-box-btn2" *ngIf="isRealTimeDs">
        <em (click)="toggleSync()" class="ddp-icon-widget-synch" [class.ddp-on]="isRealTimeWidget"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-down"></em>
          {{'msg.board.ui.sync' | translate}}
        </div>
        <!-- //툴팁 -->
      </div>

      <!-- Data Limit Info -->
      <div class="ddp-box-btn2" *ngIf="limitInfo.isShow">
        <em class="ddp-icon-widget-info2"></em>
        <!-- box info -->
        <div class="ddp-box-info ddp-limitation">
          <em class="ddp-icon-info"></em>
          <span class="ddp-total"
                [innerHTML]="'msg.page.ui.limit-msg-1' | translate : { currentCnt : limitInfo.currentCnt | numberCommas , maxCnt : limitInfo.maxCnt | numberCommas }" ></span>
          {{'msg.page.ui.limit-msg-2' | translate}}
        </div>
        <!-- box info -->
      </div>
      <!-- // Data Limit Info -->

      <!-- 차트 영역 선택 버튼 -->
      <div class="ddp-box-btn-hover"
           *ngIf="isShowChartTools && !isGridType() && chartFuncValidator.checkUseMultiSelectionByTypeString( chartType )">
        <a href="javascript:" class="ddp-btn-tool">
          <em [ngClass]="{'ddp-icon-tool-pointer' : 'SINGLE' === mouseMode,
                'ddp-icon-tool-elliptical' : 'MULTI_RECT' === mouseMode,
                'ddp-icon-tool-freeshape' : 'MULTI_POLY' === mouseMode }"></em>
        </a>
        <a (click)="changeMouseSelectMode('single', 'single')" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-pointer"></em>
        </a>
        <a (click)="changeMouseSelectMode('multi', 'rect')" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-elliptical"></em>
        </a>
        <a (click)="changeMouseSelectMode('multi', 'polygon')" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-freeshape"></em>
        </a>
      </div>
      <!-- // 차트 영역 선택 버튼 -->

      <!-- 차트 확대 버튼 -->
      <div class="ddp-box-btn-hover"
           *ngIf="isShowChartTools && !isGridType() && chartFuncValidator.checkUseZoomByTypeString( chartType )">
        <a (click)="changeMouseZoomMode( 'dragzoomin' )" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-rectangular"></em>
        </a>
        <a (click)="changeMouseZoomMode( 'zoomin' )" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-zoomin"></em>
        </a>
        <a (click)="changeMouseZoomMode( 'zoomout' )" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-zoomout"></em>
        </a>
        <a (click)="changeMouseZoomMode( 'revert' )" href="javascript:" class="ddp-btn-tool">
          <em class="ddp-icon-tool-revert"></em>
        </a>
      </div>
      <!-- // 차트 확대 버튼 -->

      <!-- 차트 정보 영역 -->
      <div class="ddp-box-btn2" >
        <em (dblclick)="copyWidgetIdToClipboard()" class="ddp-icon-widget-info" (mouseover)="showInfoLayer($event)"></em>
        <!-- popup -->
        <div class="ddp-box-layout4" style="position:fixed;">
          <div class="ddp-wrap-data-detail">
            <div class="ddp-ui-top-title">{{'msg.board.ui.title.chartinfo' | translate }}</div>
            <table class="ddp-table-pop">
              <colgroup>
                <col width="70px">
                <col width="">
              </colgroup>
              <tbody>
                <tr>
                  <th>{{'msg.page.ui.datasource' | translate }}</th>
                  <td>{{getDataSourceName()}}</td>
                </tr>
                <tr *ngIf="existPivot('columns')">
                  <th>{{'msg.page.ui.col' | translate }}</th>
                  <td>{{getPivotFieldsStr('columns')}}</td>
                </tr>
                <tr *ngIf="existPivot('rows')">
                  <th>{{'msg.page.ui.row' | translate }}</th>
                  <td>{{getPivotFieldsStr('rows')}}</td>
                </tr>
                <tr *ngIf="existPivot('aggregations')">
                  <th>{{'msg.page.ui.intersect' | translate }}</th>
                  <td>{{getPivotFieldsStr('aggregations')}}</td>
                </tr>
                <tr *ngIf="existChartFilter()">
                  <th>{{'msg.page.ui.filter' | translate }}</th>
                  <td>{{getChartFilterStr()}} </td>
                </tr>
                <tr>
                  <th>{{'msg.page.chart.info.id' | translate}}</th>
                  <td>{{widget.id}}
                    <em (click)="copyWidgetUrlToClipboard()" class="rs-component-btn-icon1 type-clipboard"
                        style="display: inline-block; margin: 1px 0 0 3px;" ></em>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- //popup -->
      </div>
      <!-- // 차트 정보 영역 -->

      <!-- 데이터 저장 버튼 -->
      <div *ngIf="isShowChartTools && isNotMapType" (click)="showPreviewDownData()" [class.ddp-box-download]="duringDataDown" class="ddp-box-btn2" >
        <em *ngIf="duringDataDown" class="ddp-icon-widget-loading"></em>
        <span *ngIf="duringDataDown" class="ddp-txt">{{ 'msg.comm.ui.downloading' | translate }}</span>
        <em *ngIf="!duringDataDown" class="ddp-icon-widget-gridsave" ></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info" >
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.book.widget.header.savetable' | translate }}
        </div>
        <!--
        <div class="ddp-ui-tooltip-info" >
          <em class="ddp-icon-view-down"></em>
          {{ useCustomField ? ( 'msg.book.widget.header.notsavetable' | translate ) : ( 'msg.book.widget.header.savetable' | translate ) }}
        </div>
        -->
        <!-- //툴팁 -->
      </div>
      <div *ngIf="isShowChartTools && !isGridType()" (click)="downloadChartImage()" class="ddp-box-btn2" >
        <em *ngIf="duringImageDown" class="ddp-icon-widget-loading"></em>
        <em *ngIf="!duringImageDown" class="ddp-icon-widget-save"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info" >
          <em class="ddp-icon-view-down"></em>
          {{  'msg.book.widget.header.savechart' | translate }}
        </div>
        <!-- //툴팁 -->
      </div>
      <!-- // 데이터 저장 버튼 -->

      <!-- 차트 편집 버튼 -->
      <div class="ddp-box-btn2" *ngIf="isAuthMgmtViewMode" (click)="editWidget()">
        <em class="ddp-icon-widget-edit"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info">
          <em class="ddp-icon-view-down"></em> {{ 'msg.comm.ui.edit' | translate }}
        </div>
        <!-- // 툴팁 -->
      </div>
      <!-- // 차트 편집 버튼 -->

      <!-- 확대/축소 버튼 -->
      <div class="ddp-box-btn2">
        <em [ngClass]="{'ddp-icon-widget-downsize': isMaximize, 'ddp-icon-widget-full': !isMaximize}"
            (click)="toggleWidgetSize()"></em>
        <!-- 툴팁 -->
        <div class="ddp-ui-tooltip-info" *ngIf="isMaximize">
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.comm.ui.contraction' | translate }}
        </div>
        <div class="ddp-ui-tooltip-info" *ngIf="!isMaximize">
          <em class="ddp-icon-view-down"></em>
          {{ 'msg.comm.ui.expansion' | translate }}
        </div>
        <!-- //툴팁 -->
      </div>
      <!-- 확대/축소 버튼 -->

      <!-- 그리드/그래프 뷰 버튼 -->
      <div class="ddp-ui-btnview" *ngIf="false">
        <div class="ddp-box-btn" [class.ddp-selected]="'chart' === widget.mode"
             (click)="changeMode('chart');">
          <em class="ddp-icon-widget-graph"></em>
          <!-- 툴팁 -->
          <div class="ddp-ui-tooltip-info">
            <em class="ddp-icon-view-down"></em>
            {{  'msg.book.widget.header.chartview' | translate }}
          </div>
          <!-- //툴팁 -->
        </div>
        <div class="ddp-box-btn" [class.ddp-selected]="'grid' === widget.mode"
             (click)="changeMode('grid');" >
          <em class="ddp-icon-widget-grid"></em>
          <!-- 툴팁 -->
          <div class="ddp-ui-tooltip-info">
            <em class="ddp-icon-view-down"></em>
            {{  'msg.book.widget.header.tableview' | translate }}
          </div>
          <!-- //툴팁 -->
        </div>
      </div>
      <!-- 그리드/그래프 뷰 버튼 -->
    </div>
    <!-- // 버튼 목록 -->

  </div>
  <!-- // Top Control -->

  <!-- 열람 모드일 때 이름 표시 영역 -->
  <div *ngIf="isShowWidgetName()"
       class="ddp-ui-graph-name" >
    <span class="ddp-data-name">{{widget.name}}</span>
    <!-- tooltip -->
    <div class="ddp-ui-tooltip-info">
      <em class="ddp-icon-view-top"></em>{{widget.name}}
    </div>
    <!-- //tooltip -->
  </div>
  <!-- // 열람 모드일 때 이름 표시 영역 -->

  <!-- Chart 영역 -->
  <div class="ddp-view-widget ddp-view-widget-chart" *ngIf="widget"
       [class.ddp-view-name]="isShowWidgetName()"
       [style.display]="(!isShowNoData && widget.mode === 'chart') ? 'block' : 'none'" >
    <bar-chart #chart
               *ngIf="chartType === 'bar' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
               [userCustomFunction]="userCustomFunction"
               (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
               (chartSelectInfo)="chartSelectInfo($event)"
               (noData)="showNoData()"
               (drawFinished)="updateComplete()"
               >
    </bar-chart>

    <grid-chart #chart
                *ngIf="chartType === 'grid' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                [userCustomFunction]="userCustomFunction"
                (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                (chartSelectInfo)="chartSelectInfo($event)"
                (noData)="showNoData()"
                (drawFinished)="updateComplete()">
    </grid-chart>

    <line-chart #chart
                *ngIf="chartType === 'line' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                [userCustomFunction]="userCustomFunction"
                (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                (chartSelectInfo)="chartSelectInfo($event)"
                (noData)="showNoData()"
                (drawFinished)="updateComplete()"
                >
    </line-chart>

    <scatter-chart #chart
                   *ngIf="chartType === 'scatter' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()"
                   >
    </scatter-chart>

    <heatmap-chart #chart
                   *ngIf="chartType === 'heatmap' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </heatmap-chart>

    <pie-chart #chart
               *ngIf="chartType === 'pie' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
               [userCustomFunction]="userCustomFunction"
               (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
               (chartSelectInfo)="chartSelectInfo($event)"
               (noData)="showNoData()"
               (drawFinished)="updateComplete()">
    </pie-chart>

    <label-chart #chart
                 *ngIf="chartType === 'label' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                 [userCustomFunction]="userCustomFunction"
                 (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                 (chartSelectInfo)="chartSelectInfo($event)"
                 [query]="query"
                 [widget]="widget"
                 (noData)="showNoData()"
                 (drawFinished)="updateComplete()">
    </label-chart>

    <boxplot-chart #chart
                   *ngIf="chartType === 'boxplot' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </boxplot-chart>

    <waterfall-chart #chart
                     *ngIf="chartType === 'waterfall' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                     [userCustomFunction]="userCustomFunction"
                     (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                     (chartSelectInfo)="chartSelectInfo($event)"
                     (noData)="showNoData()"
                     (drawFinished)="updateComplete()">
    </waterfall-chart>

    <wordcloud-chart #chart
                     *ngIf="chartType === 'wordcloud' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                     [userCustomFunction]="userCustomFunction"
                     (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                     (chartSelectInfo)="chartSelectInfo($event)"
                     (noData)="showNoData()"
                     (drawFinished)="updateComplete()">
    </wordcloud-chart>

    <combine-chart #chart
                   *ngIf="chartType === 'combine' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </combine-chart>

    <treemap-chart #chart
                   *ngIf="chartType === 'treemap' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </treemap-chart>

    <radar-chart #chart
                 *ngIf="chartType === 'radar' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                 [userCustomFunction]="userCustomFunction"
                 (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                 (chartSelectInfo)="chartSelectInfo($event)"
                 (noData)="showNoData()"
                 (drawFinished)="updateComplete()">
    </radar-chart>

    <network-chart #chart
                   *ngIf="chartType === 'network' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </network-chart>
    <sankey-chart #chart
                 *ngIf="chartType === 'sankey' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                  [userCustomFunction]="userCustomFunction"
                 (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                 (chartSelectInfo)="chartSelectInfo($event)"
                 (noData)="showNoData()"
                 (drawFinished)="updateComplete()">
    </sankey-chart>
    <gauge-chart #chart
                   *ngIf="chartType === 'gauge' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                   [userCustomFunction]="userCustomFunction"
                   (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                   (chartSelectInfo)="chartSelectInfo($event)"
                   (noData)="showNoData()"
                   (drawFinished)="updateComplete()">
    </gauge-chart>

    <map-chart #chart
                 *ngIf="chartType === 'map' && uiOption" [uiOption]="uiOption" [isUpdateRedraw]="isUpdateRedraw"
                 (uiOptionUpdated)="uiOptionUpdatedHandler($event)"
                 (chartSelectInfo)="chartSelectInfo($event)"
                 (noData)="showNoData()"
                 (drawFinished)="updateComplete()"
                 (changeDraw)="changeDraw()">
    </map-chart>

  </div>
  <!-- // Chart 영역 -->

  <!-- Data Grid 영역 -->
  <div [style.display]="( !isShowNoData && widget.mode === 'grid') ? 'block' : 'none'"
       style="width:100%;height:100%;"
       *ngIf="isAvaliableGrid(widget)">
    <grid-chart
      #gridChart
      *ngIf="gridUiOption"
      [uiOption]="gridUiOption"
      [viewMode]="true"
      (uiOptionUpdated)="gridUiOptionUpdatedHandler($event)" >
    </grid-chart>
  </div>
  <!-- // Data Grid 영역 -->

  <!-- Hierarchy 표시 영역 -->
  <div *ngIf="isShowHierarchyView" class="ddp-view-widget ddp-view-widget-grid">
    <div class="ddp-box-data-none">
      <div class="ddp-wrap-data-none">
        <div class="ddp-ui-data-none">
          <div class="ddp-txt-none">
            <em class="ddp-img-chartnodata"></em>
            <span class="ddp-data-name">{{widget.name}}</span>
            <span class="ddp-txt-det" [innerHTML]="'msg.board.ui.select-data' | translate : { value : parentWidget.name}">
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- // Hierarchy 표시 영역 -->

  <!-- Invalid Pivot -->
  <div [style.display]="isInvalidPivot ? 'block' : 'none'" class="ddp-view-widget ddp-view-widget-grid">
    <div class="ddp-box-data-none">
      <div class="ddp-wrap-data-none">
        <div class="ddp-ui-data-none">
          <div class="ddp-txt-none">
            <em class="{{boardUtil.getChartIconClass(widget)}} ddp-error"></em>
            <span class="ddp-data-name">{{widget.name}}</span>
            <span class="ddp-txt-det" [innerHTML]="'msg.board.ui.invalid-pivot' | translate"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Invalid Pivot -->

  <!-- No Data 영역 -->
  <div [style.display]="isShowNoData ? 'block' : 'none'" class="ddp-view-widget ddp-view-widget-grid">
    <div class="ddp-box-data-none">
      <div class="ddp-wrap-data-none">
        <div class="ddp-ui-data-none">
          <div class="ddp-txt-none">
            <em class="{{boardUtil.getChartIconClass(widget)}}"></em>
            <span class="ddp-data-name">{{widget.name}}</span>
            <span class="ddp-txt-det">
              {{'msg.page.ui.no.data.show' | translate}}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- // No Data 영역 -->

  <!-- Error 표시 영역 -->
  <error-widget [isShow]="isError"
                [iconClass]="boardUtil.getChartIconClass(widget)"
                [widgetName]="widget.name"
                [errorInfo]="errorInfo"></error-widget>
  <!-- // Error 표시 영역 -->

  <!-- 수정 버튼 레이어 -->
  <div *ngIf="isEditMode" class="ddp-hover-edit">
    <div class="ddp-hover-edit-in">
      <a (click)="editWidget()" href="javascript:" class="ddp-btn-edit"></a>
    </div>
  </div>
  <!-- // 수정 버튼 레이어 -->

  <!-- 미리보기 팝업 -->
  <div *ngIf="isShowDownloadPopup" class="popup-chart-data">
    <div class="ddp-pop-preview ddp-type ">

      <!-- top -->
      <div class="ddp-ui-top">
        <div class="ddp-data-name">
          {{ 'msg.board.ui.view-chart-data' | translate }}
        </div>
        <em (click)="hidePreviewDownData()" class="ddp-btn-popup-close"></em>
      </div>
      <!-- // top -->

      <!-- cpmtemts -->
      <div class="ddp-ui-preview-contents ddp-type-preview ddp-pop-datadetail">
        <!-- option -->
        <div class="ddp-type-top-option">
          <ul class="ddp-ui-tab ddp-type">
            <li [class.ddp-selected]="!isOriginDown">
              <a (click)="drawDataGrid()" href="javascript:">{{ 'msg.board.ui.aggregated-data' | translate }}</a>
            </li>
            <li [class.ddp-selected]="isOriginDown">
              <a (click)="drawDataGrid(true)" href="javascript:">{{ 'msg.board.ui.original-data' | translate }}</a>
            </li>
          </ul>
          <!-- right -->
          <div *ngIf="!isCanNotDownAggr" class="ddp-ui-rightoption ddp-type-option">
            <!-- 클릭시 ddp-selected 추가 : 팝업 show 됨 -->
            <div (click)="showDownloadLayer($event)" class="ddp-box-btn2 ddp-box-selected ddp-selected">
              <a href="javascript:" class="ddp-link-txt">
                <em class="ddp-icon-widget-gridsave"></em> Download
              </a>
            </div>
            <!-- popup -->
            <data-download
              [title]="isOriginDown ? ( 'msg.board.download.title-org' | translate ) : ( 'msg.board.download.title-aggr' | translate )"
              [query]="query"
              (startDownload)="duringDataDown = true" (endDownload)="duringDataDown = false"></data-download>
            <!-- // popup -->
          </div>
          <!-- //right -->
        </div>
        <!-- //option -->

        <div class="ddp-wrap-tab-contents">

          <!-- tab contents -->
          <div class="ddp-ui-tab-contents" >
            <div class="ddp-wrap-grid-option ddp-clear">
              <div class="ddp-fleft">
                <!-- 검색 -->
                <component-input
                  [compType]="'search'"
                  [value]="srchText"
                  [placeHolder]="'Search data'"
                  (changeValue)="setSearchText($event)"></component-input>
                <!-- //검색 -->
              </div>
            </div>
            <!-- 그리드 -->
            <div *ngIf="!isCanNotDownAggr" #dataGrid grid-component class="ddp-ui-grid2" style="top:44px;"></div>
            <div *ngIf="isCanNotDownAggr" class="ddp-ui-grid2 ddp-type">
              <div class="ddp-ui-error-message">
                {{ 'msg.board.ui.cant-not-down-aggregate' | translate }}
              </div>
            </div>

            <!-- //그리드 -->
          </div>
          <!-- //tab contents -->

        </div>

      </div>
      <!-- //cpmtemts -->

    </div>
  </div>
  <!-- //미리보기 팝업 -->

  <div *ngIf="isShowEvtTriggerEditor"  #userFuncInputContainer
       style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;">
    <div class="ddp-top-control ddp-clear">
      <!-- buttons -->
      <div class="ddp-ui-buttons">
        <!-- <span class="ddp-txt-event">Event trigger</span> -->
        <a (click)="saveUserFunc()" href="javascript:" class="ddp-btn-solid-type">{{ 'msg.comm.btn.save' | translate }}</a>
        <div class="ddp-box-btn2">
          <em (click)="closeUserFuncInput()" class="ddp-icon-widget-cut-w ddp-hover-tooltip">
            <!-- tooltip -->
            <div class="ddp-ui-tooltip-info ddp-down">
              <em class="ddp-icon-view-top"></em>
              {{ 'msg.comm.ui.del' | translate }}
            </div>
            <!-- //tooltip -->
          </em>
        </div>
      </div>
      <!-- //buttons -->
      <div *ngIf="isShowWidgetName()" class="ddp-top-label">{{widget.name}}</div>
    </div>
    <div class="ddp-view-widget" style="padding:25px 0 0 0;">
      <textarea #userFuncInput [ngModel]="userCustomFunction"
                class="ddp-textarea-widget" placeholder="P.H Event trigger script"
                style="background:white;"></textarea>
    </div>
  </div>

</div>
